<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>MY NOTES</title>
        <style type="text/css">
            html, body{
                margin: 0;
                padding: 0;
                height: 100%;
            }
            .content{
                min-height: 100%;
            }
            .main{
                padding: 20px;
                padding-bottom: 50px;
            }
            .todo{
                width: 50%;
                float: left;
                }
            .schedule{
                width: 50%;
                float: right;
                }
            .img{
                width: 50%;
                float: left;
            }
            .footer{
                height: 50px;
                margin-top: -60px;
            }
            .music{
                width: 70%;
                float: left;
            }
            .email{
                width: 20;
                float: right;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="main">
                <!-- 标题 -->
                <div class="head">
                    <h1><center>These are my NOTES.</center></h1>
                </div>
                <hr/>
                <!-- 左边放TODO -->
                <div class="todo">
                    <h3><center>TODO</center></h3>
                    <center>
                        <table border="1" width=90%>
                            <tr>
                                <th>DONE</th>
                                <th>ITEM</th>
                                <th>COST</th>
                                <th>DDL</th>
                            </tr>
                            <tr>
                                <th> </th>
                                <th>半导体物理</th>
                                <th>70min</th>
                                <th>11/17</th>
                            </tr>
                        </table>
                    </center>
                </div>
                <!-- 右边放SCHEDULE -->
                <div class="schedule">
                    <h3><center>SCH today</center></h3>
                    <center>
                        <table border="1" width=90%>
                            <tr>
                                <th>DUR</th>
                                <th>ITEM</th>
                            </tr>
                            <tr>
                                <th>11:00-12:00</th>
                                <th>通信原理</th>
                            </tr>
                        </table>
                    </center>
                </div>
                <!-- 插入图片 -->
                <div class="img">
                    <img src="media/background-image.jpg" alt="图片加载失败" width=80%/>
                </div>
            </div>
        </div>
        <div class="footer">
            <!-- 插入音乐 -->
            <div class="music">
                <audio controls="controls" loop="loop" preload="auto" src="media/music.mp3">音乐加载失败</audio>
            </div>
            <!-- 邮箱 -->
            <div class="email">
                <a href="mailto:Vaine0@bupt.edu.cn">Contect me.</a>
            </div>
        </div>
    </body>
</html>